<template>
<section class="album">
  <div class="album-inner">
    <el-row :gutter="15">
      <el-col :span="12">
        <h2 class="title">下载排行榜</h2>
        <ul class="download-list">
          <li v-for="(item,index) in TopList" :key="index">
            <span class="sort-number icon_a" v-if="index==0">1</span>
            <span class="sort-number icon_b" v-if="index==1">2</span>
            <span class="sort-number icon_c" v-if="index==2">3</span>
            <span class="sort-number" v-if="index > 2">NO.{{index+1}}</span>
            <el-image :src="item.img_thumbnail|fillImgShot" style="height:120px;width:180px;cursor: pointer;" fit="cover" @click="linkToDetail(item.id)"></el-image>
            <div class="list-content">
              <h3>{{item.img_name}}</h3>
              <p><i class="iconfont icon-xiazai" style="color:red;"></i><span class="download-count">{{item.download_counts}}</span>次下载</p>
            </div>
            <!-- <el-button title="点击收藏" icon="el-icon-star-on" circle type="warning" plain  :style="{color:item.isCollect?'red':''}" @click="collect(item.id)"></el-button> -->
            <i title="点击收藏" class="iconfont icon-shoucang" :style="{color:item.isCollect?'#f56c6c':'#cdcdcd',fontSize:30+'px'}" style="cursor: pointer;" @click="collect(item.id)"></i>
          </li>
        </ul>
      </el-col>
      <el-col :span="12">
        <h2 class="title bg2">最热排行榜</h2>
        <ul class="download-list">
          <li v-for="(item,index) in TopHotList" :key="index">
            <span class="sort-number icon_a" v-if="index==0">1</span>
            <span class="sort-number icon_b" v-if="index==1">2</span>
            <span class="sort-number icon_c" v-if="index==2">3</span>
            <span class="sort-number" v-if="index > 2">NO.{{index+1}}</span>
            <el-image :src="item.img_thumbnail|fillImgShot" style="height:120px;width:180px;cursor: pointer;" fit="cover" @click="linkToDetail(item.id)"></el-image>
            <div class="list-content">
              <h3>{{item.img_name}}</h3>
              <p><i class="iconfont icon-redu" style="color:#f00;"></i><span class="download-count">热度值:{{item.hot_num/TopHotList[0].hot_num*100}}</span></p>
            </div>
            <i title="点击收藏" class="iconfont icon-shoucang" :style="{color:item.isCollect?'#f56c6c':'#cdcdcd',fontSize:30+'px'}" style="cursor: pointer;" @click="collect(item.id)"></i>
            <!-- <el-button title="点击收藏" icon="el-icon-star-off" circle type="warning" plain></el-button> -->
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</section>
</template>

<script>
import {
  mapState
} from "vuex";
export default {
  name: 'Top', //TOP排行榜
  data() {
    return {
      TopList: [],
      TopHotList: [],
      gallery: [],
      topHotParmas: {
        //热度排行参数
        page: 1,
        pageSize: 10,
        userid: ""
      },
      topParmas: {
        //Top排行参数
        page: 1,
        pageSize: 10,
        userid: ''
      },
    }
  },
  computed: {
    ...mapState("user", {
      isLogin: state => state.isLogin,
    })
  },
  watch: {
    isLogin(newVal, oldVal) {
      if (!newVal) {
        this.topParmas.userid = '';
        this.topHotParmas.userid = '';
      } else {
        if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
          var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
          this.topParmas.userid = data.userid;
          this.topHotParmas.userid = data.userid;
        }
      }
      this.getTopList(this.topParmas);
      this.getHotImageList(this.topHotParmas);
    }
  },
  mounted() {
    if (window.sessionStorage.getItem("tuyibo_userid") !== null) {
      var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
      // this.$store.commit("user/SET_isLogin", true);
      this.topParmas.userid = data.userid;
      this.topHotParmas.userid = data.userid;
    }
    this.getTopList(this.topParmas);
    this.getHotImageList(this.topHotParmas);
  },
  methods: {
    linkToDetail(id) {
      this.$router.push(`/detail?id=${id}`);
    },
    linkTo(obj) {
      var type = parseInt(obj.tp_type);
      if (type === 1) {
        this.$router.push({
          name: "list",
          path: "/list",
          query: {
            topic_id: obj.id,
            title: obj.name
          }
        });
      } else {
        window.open(obj.link, "_self");
        return;
      }

    },
    // 收藏图片
    collect(image_id) {
      if (window.sessionStorage.getItem("tuyibo_userid") != null) {
        var data = JSON.parse(window.sessionStorage.getItem("tuyibo_userid"));
        this.$axios.post("/api/web/collectPicture", {
            uid: data.userid,
            image_id: image_id
          }).then(res => {
            if (res.data.code == -1) {
              this.$message.info(res.data.msg);
            } else {
              this.$message.success(res.data.msg)
            }
            this.getTopList(this.topParmas)
            this.getHotImageList(this.topHotParmas);
          })
          .catch(err => {
            console.log(err)
          })
      } else if( window.loginbox ){
          window.loginbox.show = true
        }
    },
    // 获取Top排行
    getTopList(p) {
      this.$axios.post("/api/web/getTopImageList", p).then(res => {
        this.TopList = res.data.rows;
      });
    },
    // 获取最热排行图片列表
    getHotImageList(p) {
      this.$axios.post("/api/web/getTopHotImageList", p).then(res => {
        this.TopHotList = res.data.rows;
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../assets/css/icon.css";
.album {
    margin-bottom: 24px;
    .title {
        text-align: center;
        position: relative;
        font-size: 32px;
        font-weight: 800;
        color: @color-warning;
        min-height: 90px;
        line-height: 72px;
        &:after {
            content: "";
            position: absolute;
            bottom: 20px;
            width: 5em;
            margin-left: -2.5em;
            left: 50%;
            height: 4px;
            background-color: @color-warning;
        }
        &.bg2 {
            color: @color-success;
            &:after {
                background-color: @color-success;
            }
        }
    }
    .download-list {
        > li {
            display: flex;
            align-items: center;
            background-color: @white;
            padding: 16px;
            position: relative;
            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                border-bottom: 1px solid @color-border-extralight;
            }
            &:nth-child(1) {
                background-color: #fff3e2;
                padding: 32px 16px;
                border-radius: 24px 24px 0 0;
            }
            &:nth-child(2) {
                background-color: #edf6ff;
                padding: 32px 16px;
            }
            &:nth-child(3) {
                background-color: #f9f7f5;
                padding: 32px 16px;
            }
            .sort-number {
                flex: 0 0 60px;
                margin-right: 40px;
                height: 60px;
                font-weight: 800;
                text-align: center;
                line-height: 60px;
            }
            .list-content {
                flex: 1;
                padding-left: 16px;
                padding-right: 16px;
                h3 {
                    font-weight: 600;
                    margin: 0 0 8px;
                }
                p {
                    color: @color-subsidiary;
                }
            }
            .icon_a {
                background: url("../assets/images/icon_list_a.png") center center /48px no-repeat;
                line-height: 78px;
                color: #FFF;
            }
            .icon_b {
                background: url("../assets/images/icon_list_b.png") center center /48px no-repeat;
                line-height: 78px;
                color: #FFF;
            }
            .icon_c {
                background: url("../assets/images/icon_list_c.png") center center /48px no-repeat;
                line-height: 78px;
                color: #FFF;
            }
        }
    }
}
</style>
